<!-- <template>
  <div>
    <h2>响应式数据</h2>
    <button @click="AddCount">当前为:{{ count }}</button>
  </div>
</template>

<script>
     export default {
      data(){
        return{
          count:0 //声明变量
        }
      },
      methods:{
        //写入各式各样的函数(方法)
        AddCount(){
          this.count++  //为变量实现累加效果
        }
      },
      mounted(){
        //mounted():生命周期函数钩  特点:加载页面时会自动执行
        console.log("现在数字为:"+this.count);
      }
     }
</script> -->

<template>
  <div>
    <h2>响应式数据</h2>
    <button @click="AddCount">当前为:{{ count }}</button>
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'

//声明一个变量 声明为响应式数据
const count=ref(0);

//声明方法，完成参数累加
function AddCount(){
  count.value++;
}

//声明生命周期函数钩
onMounted(()=>{
  console.log("现在数字为:"+count.value);
})
</script>